<template>
  <div>
    <el-main v-if="!url" style="height: calc(100vh - 70px);">
      <div class="timeBox">
        <el-date-picker
          :clearable="false"
          value-format="yyyy-MM"
          v-model="time"
          type="month"
          placeholder="选择月"
          @change="changeTime"
        >
        </el-date-picker>
      </div>

      <el-row :gutter="20" class="box" style="height: 92.5vh">
        <el-col :span="12" style="height: 100%">
          <div class="rigth_box_t">
            <div class="change_t">
              <div id="change_t_gauge" class="change_t_gauge"></div>
              <div id="change_t_gauge1" class="change_t_gauge1"></div>
              <div id="change_t_gauge2" class="change_t_gauge2"></div>
              <div class="add_text" :style="{ '--zoom': zoom }">
                <div style="font-size: 12px">本月新增</div>
                <div style="font-size: 30px">
                  <CountTo
                    style="padding: 0"
                    :startVal="0"
                    :endVal="changeData.month_add"
                    :duration="2100"
                  />
                </div>
              </div>

              <div class="gauge_bgc" :style="{ '--zoom': zoom }">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>

            <div class="change_b" :style="{ '--zoom': zoom }">
              <el-row :gutter="10">
                <el-col :span="4" v-for="(item, index) in changeData.list" :key="index">
                  <div class="change_b_item">
                    <div class="item_t">
                      <span
                        >本月 {{ item.month_add > 0 ? "+" : "" }}
                        <CountTo
                          style="padding: 0"
                          :startVal="0"
                          :endVal="item.month_add"
                          :duration="2100"
                        />
                      </span>
                    </div>
                    <div class="item_z">
                      <div class="z_t">
                        <CountTo :startVal="0" :endVal="item.number" :duration="2100" />
                      </div>
                      <div class="z_b" :style="{ '--bgColor': changeTypeBgc[index] }">
                        {{ item.name }}
                      </div>
                    </div>
                    <div class="item_b">
                      <el-row :gutter="6">
                        <el-col :span="12">
                          <div class="one_div">
                            <div>{{ item.prp_name }}</div>
                            <div class="state">
                              <div
                                :class="
                                  item.prp_status == 0 ? 'span_typebot' : 'span_typeTop'
                                "
                              >
                                <CountTo
                                  :startVal="0"
                                  :endVal="item.prp_add"
                                  :duration="2100"
                                />%
                              </div>
                              <div
                                :class="
                                  item.prp_status == 0
                                    ? 'icon_bottom span_typebot'
                                    : 'span_typeTop'
                                "
                              >
                                <i class="iconfont icon-fanhuidingbu"></i>
                              </div>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div class="one_div">
                            <div>{{ item.ratio_name }}</div>
                            <div class="state">
                              <div
                                :class="
                                  item.ratio_status == 0 ? 'span_typebot' : 'span_typeTop'
                                "
                              >
                                <CountTo
                                  :startVal="0"
                                  :endVal="item.ratio_add"
                                  :duration="2100"
                                />%
                              </div>
                              <div
                                :class="
                                  item.ratio_status == 0
                                    ? 'icon_bottom span_typebot'
                                    : 'span_typeTop'
                                "
                              >
                                <i class="iconfont icon-fanhuidingbu"></i>
                              </div>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="rigth_box_b">
            <div id="zho_box_b" class="zho_box_b_bar"></div>
            <div class="left_text" :style="{ '--zoom': zoom }">专利新增占比态势</div>
          </div>
        </el-col>

        <el-col :span="12" style="height: 100%">
          <div class="left_box_t">
            <div class="left_text" :style="{ '--zoom': zoom }">走访数据</div>
            <div class="change_t" :style="{ '--zoom': zoom }">
              <el-row :gutter="11">
                <el-col :span="6" v-for="(item, index) in changeType" :key="index">
                  <div class="change_box" :style="{ '--bgColor': item.bgc }">
                    <div class="change_box_new">
                      <div class="change_text">
                        <span style="color: #fff">{{ year }} {{ item.value }}</span>
                      </div>
                      <div>
                        <span
                          style="font-size: 30px; padding-right: 5px; font-weight: bold"
                          >{{ item.Number }}</span
                        >{{ item.Company }}
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="change_b" :style="{ '--zoom': zoom }">
              <el-row :gutter="11">
                <el-col :span="6">
                  <div
                    class="change_b_item"
                    :style="{ '--bgColor': changeTypeBgc['name1'] }"
                  >
                    <div>
                      <div>本月</div>
                      <div>走访企业</div>
                    </div>
                    <div class="item_t">
                      <span
                        >{{ (changeList.one.company ) > 0 ? "+" : "" }}
                        {{ changeList.one.company  }}</span
                      >
                    </div>
                    <div>上月：{{ changeList.two.company }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div
                    class="change_b_item"
                    :style="{ '--bgColor': changeTypeBgc['name1'] }"
                  >
                    <div>
                      <div>本月</div>
                      <div>企业需求</div>
                    </div>
                    <div class="item_t">
                      <span
                        >{{ (changeList.one.demand ) > 0 ? "+" : ""
                        }}{{ changeList.one.demand }}</span
                      >
                    </div>
                    <div>上月：{{ changeList.two.demand }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div
                    class="change_b_item"
                    :style="{ '--bgColor': changeTypeBgc['name1'] }"
                  >
                    <div>
                      <div>本月</div>
                      <div>已解决需求</div>
                    </div>
                    <div class="item_t">
                      <span
                        >
                        {{ (changeList.one.true_demand ) > 0 ? "+" : "" }}
                        {{
                          changeList.one.true_demand 
                        }}</span
                      >
                    </div>
                    <div>上月：{{ changeList.two.true_demand }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div
                    class="change_b_item"
                    :style="{ '--bgColor': changeTypeBgc['name1'] }"
                  >
                    <div>
                      <div>本月</div>
                      <div>需求解决率</div>
                    </div>
                    <div class="item_t">
                      <span>
                      {{ changeList.one.ratio > 0  ? "+" : "" }}
                      {{ changeList.one.ratio }}</span>
                    </div>
                    <div>上月：{{ changeList.two.ratio }}</div> 
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="left_box_b">
            <div class="zho_box_b_main" id="main"></div>
            <div class="left_text" :style="{ '--zoom': zoom }">需求类型分析</div>
            <el-row :gutter="0" style="height: 100%">
              <el-col :span="12" style="height: 100%">
                <el-row :gutter="20" style="height: 100%">
                  <el-col
                    :span="12"
                    style="height: 48%"
                    :style="{ '--bgc': item.bgc, '--zoom': zoom }"
                    v-for="(item, index) in demandList"
                    :key="index"
                    class="demand_box"
                  >
                    <div class="left_demand">
                      <div class="left_demand_new">
                        <div class="demand_title">
                          <span style="color: #fff">{{ item.value }}</span>
                        </div>
                        <div>
                          <span
                            style="font-size: 30px; margin-right: 5px; font-weight: bold"
                          >
                            <CountTo
                              :startVal="0"
                              :endVal="Number(item.Number)"
                              :duration="2100"
                            /> </span
                          >{{ item.Company }}
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12" style="height: 100%">
                <div class="pie_new">
                  <div id="pie" class="pie"></div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-main>


    <div v-else class="" style="height: calc(100vh - 70px);">
      <iframe style="width: 100%;height: 100%" :src="url"></iframe>
    </div>
    
  </div>
</template>
<script>
import {
  getVisitInfo,
  getPatentInfo,
  getPatentAdd,
  visitDemandInfo,
} from "@/api/newuser.js";
import * as echarts from "echarts";
import CountTo from "vue-count-to";
import { PAGE_BASE_URL } from '@/config'

export default {
  components: { CountTo },
  data() {
    return {
      url: "",
      year: "",
      start_time: "",
      end_time: "",
      time: "",
      changeList: {
        one: {
          company: 0,
          demand: 0,
          true_demand: 0,
          ratio: 0,
        },
        two: {
          company: 0,
          demand: 0,
          true_demand: 0,
          ratio: 0,
        },
        list: {
          name1: "",
          name2: "",
          name3: "",
          name4: "",
        },
      },
      demandList: [
        {
          value: "",
          bgc: "#0297FE",
          Company: "例",
          Number: "",
        },
        {
          value: "",
          bgc: "#02ECFF",
          Company: "例",
          Number: "",
        },
        {
          value: "",
          bgc: "#0043FF",
          Company: "例",
          Number: "",
        },
        {
          value: "",
          bgc: "#016AFD",
          Company: "例",
          Number: "",
        },
      ],
      changeType: [
        {
          value: "年度走访企业",
          bgc: "#006CFF",
          Company: "例",
          Number: "",
        },
        {
          value: "年度企业需求",
          bgc: "#7f6fec",
          Company: "例",
          Number: "",
        },
        {
          value: "年度已解决需求",
          bgc: "#FF8A6E",
          Company: "例",
          Number: "",
        },
        {
          value: "年度需求解决率",
          bgc: "#2BCFB6",
          Company: "%",
          Number: "",
        },
      ],
      Histogram5: [],
      zoom: 1,
      changeData: {
        list: {
          name1: {
            month_add: 196,
            name: "发明申请",
            number: 14337,
            prp_add: 12.1,
            prp_name: "同比减少",
            prp_status: 0,
            ratio_add: 50.8,
            ratio_name: "环比增长",
            ratio_status: 1,
          },
          name2: {
            month_add: 196,
            name: "发明授权",
            number: 14337,
            prp_add: 12.1,
            prp_name: "同比减少",
            prp_status: 0,
            ratio_add: 50.8,
            ratio_name: "环比增长",
            ratio_status: 1,
          },
          name3: {
            month_add: 196,
            name: "实用新型",
            number: 14337,
            prp_add: 12.1,
            prp_name: "同比减少",
            prp_status: 0,
            ratio_add: 50.8,
            ratio_name: "环比增长",
            ratio_status: 1,
          },
          name4: {
            month_add: 196,
            name: "外观设计",
            number: 14337,
            prp_add: 12.1,
            prp_name: "同比减少",
            prp_status: 0,
            ratio_add: 50.8,
            ratio_name: "环比增长",
            ratio_status: 1,
          },
          name5: {
            month_add: 196,
            name: "pct",
            number: 14337,
            prp_add: 12.1,
            prp_name: "同比减少",
            prp_status: 0,
            ratio_add: 50.8,
            ratio_name: "环比增长",
            ratio_status: 1,
          },
          name6: {
            month_add: 196,
            name: "授权商标",
            number: 14337,
            prp_add: 12.1,
            prp_name: "同比减少",
            prp_status: 0,
            ratio_add: 50.8,
            ratio_name: "环比增长",
            ratio_status: 1,
          },
        },
        month_add: 765,
        prp_add: 13.9,
        prp_name: "同比减少",
        prp_status: 0,
        ratio_add: 55.5,
        ratio_name: "环比增长",
        ratio_status: 1,
        title: "北滘镇知识产权大数据平台",
        trademark: 33916,
        trademark_add: 665,
        trademark_ratio_add: 773.3,
        trademark_ratio_name: "环比减少",
        trademark_ratio_status: 0,
        update_time: "2024-04-01",
        valid_patent: 76393,
      },
      changeTypeBgc: {
        name1: "#006CFF",
        name2: "#6ACCA3",
        name3: "#EACF19",
        name4: "#7F6FEC",
        name5: "#FE7C4B",
        name6: "#FE7C4B",
      },
      piecolor: ["#0496ff", "#09e3ff", "#0745eb", "#0494fd", "#fe836c", "#786ce0"],
      gauge_objDemoSmall: {
        startAngle: 220,
        endAngle: -40,
        min: 0,
        max: 10,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            opacity: 1,
            width: 5,
          },
        },
        progress: {
          width: 5, //进度条宽度
        },
        axisTick: {
          show: true,
          distance: 0, //刻度小
          splitNumber: 1, //长度
          lineStyle: {
            width: 1,
            color: "#cac9ca",
          },
        },
        splitLine: {
          show: true,
          distance: 0, //刻度大
          length: 2, //长度
          lineStyle: {
            width: 1,
            color: "#cac9ca",
          },
        },
        data: [
          {
            value: 1,
            name: "环比增加",
            title: {
              offsetCenter: ["0%", "-35%"],
              fontSize: 12, //标题文字大小
              color: "#fff",
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["3%", "15%"],
            },
          },
        ],
        detail: {
          // valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 80,
          // offsetCenter: [0, '-15%'],
          fontSize: 24, //数据文字大小
          fontWeight: "bolder",
          formatter: "{value}%",
          color: "#6bf5f9",
        },
        axisLabel: {
          distance: 10, //文字位置
          color: "#cccecd",
          fontSize: 3, //文字大小
        },
      },
      gauge_obj: {
        startAngle: 225,
        endAngle: -45,
        min: 0,
        max: 24000,
        splitNumber: 6,
        axisLine: {
          lineStyle: {
            opacity: 0,
            width: 5,
          },
        },
        progress: {
          width: 15, //进度条宽度
        },
        axisTick: {
          show: true,
          distance: -20, //刻度小
          splitNumber: 10, //长度
          lineStyle: {
            width: 2,
            color: "#00f5f8",
          },
        },
        splitLine: {
          show: true,
          distance: -30, //刻度大
          length: 15, //长度
          lineStyle: {
            width: 3,
            color: "#00f5f8",
          },
        },
        data: [
          {
            value: 20698,
            name: "本有效专利",
            title: {
              offsetCenter: ["0%", "-45%"],
              fontSize: 12, //标题文字大小
              color: "#fff",
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ["3%", "-20%"],
            },
          },
        ],
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 80,
          // offsetCenter: [0, '-15%'],
          fontSize: 50, //数据文字大小
          fontWeight: "bolder",
          formatter: "{value} ",
          color: "#fff",
        },
        axisLabel: {
          distance: 35, //文字位置
          color: "#00f5f8",
          fontSize: 12, //文字大小
        },
      },
    };
  },
  created() {
    this.url = this.$store.state.user.url

    //截取url #字符后面的
    if(this.url){
      this.url = this.url.split('#')[1]
      // 获取当前页面域名
      const currentDomain = window.location.origin;
      this.url = currentDomain + '/#' + this.url
    }
    console.log(this.url);
    // this.url = 'http://localhost :9528/#/data/gaoming' //测试
  },
  mounted() {

    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;

    //接口
    if(this.url){
      return
    }

    const today = new Date();
    const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    let year = today.getFullYear();
    this.year = year;
    let month =
      today.getMonth() + 1 > 10 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1);
    let endDay = lastDay.getDate();
    this.start_time = year + "-" + month + "-01";
    this.end_time = year + "-" + month + "-" + endDay;
    this.time = year + "-" + month;
    console.log(this.start_time, this.end_time);

    this.getPatentInfo(); //左上
    this.streetcenterrat(); //左下柱状图
    this.visitDemandInfo(this.start_time, this.end_time); //右下饼图
    this.VisitInfo(); //右上
    //
  },
  methods: {
    VisitInfo() {
      const today = new Date();
      const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      let year = today.getFullYear();
      let month =
        today.getMonth() + 1 > 10 ? today.getMonth() + 1 : "0" + (today.getMonth() + 1); //月
      let month2 = today.getMonth() > 10 ? today.getMonth() : "0" + today.getMonth(); //月
      let endDay = lastDay.getDate();

      console.log(this.getDays(year, 12), "年度月数量");
      //年度
      let time1 = this.year + "-01-01";
      let time2 = this.year + "-12-" + this.getDays(year, 12);
      getVisitInfo({
        start_time: time1,
        end_time: time2,
      }).then((res) => {
        this.changeType[0].Number = res.list.company;
        this.changeType[1].Number = res.list.demand;
        this.changeType[2].Number = res.list.true_demand;
        this.changeType[3].Number = res.list.ratio;
      });

      //本月
      getVisitInfo({
        start_time: this.start_time,
        end_time: this.end_time,
      }).then((res) => {
        this.changeList.one = res.list;
      });

      //上月
      getVisitInfo({
        start_time: year + "-" + month2 + "-01",
        end_time: year + "-" + month2 + "-" + endDay,
      }).then((res) => {
        this.changeList.two = res.list;
      });
    },
    visitDemandInfo(time1, time2) {
      visitDemandInfo({
        start_time: time1,
        end_time: time2,
      }).then((res) => {
        console.log("需求类型", res);
        let data;
        if (res.list.length) {
          this.demandList[0].value = res.list[0].name;
          this.demandList[0].Number = res.list[0].number;
          this.demandList[1].value = res.list[1].name;
          this.demandList[1].Number = res.list[1].number;
          this.demandList[2].value = res.list[2].name;
          this.demandList[2].Number = res.list[2].number;
          this.demandList[3].value = res.list[3].name;
          this.demandList[3].Number = res.list[3].number;

          data = res;
          data = data.list.map((item, index) => {
            let demo = {};
            demo.itemStyle = {
              color: this.piecolor[index],
            };
            demo.value = item.number;
            demo.name = item.name;
            if (index < this.demandList.length) {
              this.demandList[index].value = item.name;
              this.demandList[index].Number = item.number;
            }
            return demo;
          });
        } else {
          // this.demandList[0].value = 0
          this.demandList[0].Number = 0;
          // this.demandList[1].value = 0
          this.demandList[1].Number = 0;
          // this.demandList[2].value = 0
          this.demandList[2].Number = 0;
          // this.demandList[3].value = 0
          this.demandList[3].Number = 0;
          data = [];
        }

        //饼图
        let pie = document.getElementById("pie");
        this.pie(pie, data);
      });
    },
    getPatentInfo() {
      getPatentInfo({
        date: this.time,
      })
        .then((res) => {
          this.changeData.list.name1.month_add = res.add.num1;
          this.changeData.list.name2.month_add = res.add.num2;
          this.changeData.list.name3.month_add = res.add.num3;
          this.changeData.list.name4.month_add = res.add.num4;
          this.changeData.list.name5.month_add = res.add.num5;
          this.changeData.list.name6.month_add = res.add.num6;

          this.changeData.list.name1.number = res.sum.num1;
          this.changeData.list.name2.number = res.sum.num2;
          this.changeData.list.name3.number = res.sum.num3;
          this.changeData.list.name4.number = res.sum.num4;
          this.changeData.list.name5.number = res.sum.num5;
          this.changeData.list.name6.number = res.sum.num6;

          this.changeData.list.name1.prp_status = res.add.num1_yoy[1];
          this.changeData.list.name2.prp_status = res.add.num2_yoy[1];
          this.changeData.list.name3.prp_status = res.add.num3_yoy[1];
          this.changeData.list.name4.prp_status = res.add.num4_yoy[1];
          this.changeData.list.name5.prp_status = res.add.num5_yoy[1];
          this.changeData.list.name6.prp_status = res.add.num6_yoy[1];
          // this.changeData.list.name6.prp_status = 0;

          this.changeData.list.name1.prp_add = res.add.num1_yoy[0];
          this.changeData.list.name2.prp_add = res.add.num2_yoy[0];
          this.changeData.list.name3.prp_add = res.add.num3_yoy[0];
          this.changeData.list.name4.prp_add = res.add.num4_yoy[0];
          this.changeData.list.name5.prp_add = res.add.num5_yoy[0];
          this.changeData.list.name6.prp_add = res.add.num6_yoy[0];
          // this.changeData.list.name6.prp_add = 0;

          this.changeData.list.name1.ratio_status = res.add.num1_qoq[1];
          this.changeData.list.name2.ratio_status = res.add.num2_qoq[1];
          this.changeData.list.name3.ratio_status = res.add.num3_qoq[1];
          this.changeData.list.name4.ratio_status = res.add.num4_qoq[1];
          this.changeData.list.name5.ratio_status = res.add.num5_qoq[1];
          this.changeData.list.name6.ratio_status = res.add.num6_qoq[1];
          // this.changeData.list.name6.ratio_status = 0;

          this.changeData.list.name1.ratio_add = res.add.num1_qoq[0];
          this.changeData.list.name2.ratio_add = res.add.num2_qoq[0];
          this.changeData.list.name3.ratio_add = res.add.num3_qoq[0];
          this.changeData.list.name4.ratio_add = res.add.num4_qoq[0];
          this.changeData.list.name5.ratio_add = res.add.num5_qoq[0];
          this.changeData.list.name6.ratio_add = res.add.num6_qoq[0];
          // this.changeData.list.name6.ratio_add = 0;

          this.changeData.month_add = res.add.num7;
          this.changeData.valid_patent = res.sum.num7;

          let data = this.gauge_obj;
          let data1 = JSON.parse(JSON.stringify(this.gauge_objDemoSmall));
          let data2 = JSON.parse(JSON.stringify(this.gauge_objDemoSmall));
          data.data[0].value = this.changeData.valid_patent;

          //写死的
          data1.data[0].value = this.changeData.prp_add;
          data1.data[0].name = this.changeData.prp_name;
          data2.data[0].value = this.changeData.ratio_add;
          data2.data[0].name = this.changeData.ratio_name;
          //仪表盘
          let gauge = document.getElementById("change_t_gauge");
          this.gauge(gauge, data);
          let gauge1 = document.getElementById("change_t_gauge1");
          this.gauge(gauge1, data1);
          let gauge2 = document.getElementById("change_t_gauge2");
          this.gauge(gauge2, data2);
          console.log(this.changeData, "changeData");
        })
        .catch((res) => {
          this.changeData.list.name1.month_add = 0;
          this.changeData.list.name2.month_add = 0;
          this.changeData.list.name3.month_add = 0;
          this.changeData.list.name4.month_add = 0;
          this.changeData.list.name5.month_add = 0;
          this.changeData.list.name6.month_add = 0;

          this.changeData.list.name1.number = 0;
          this.changeData.list.name2.number = 0;
          this.changeData.list.name3.number = 0;
          this.changeData.list.name4.number = 0;
          this.changeData.list.name5.number = 0;
          this.changeData.list.name6.number = 0;

          this.changeData.list.name1.prp_status = 0;
          this.changeData.list.name2.prp_status = 0;
          this.changeData.list.name3.prp_status = 0;
          this.changeData.list.name4.prp_status = 0;
          this.changeData.list.name5.prp_status = 0;
          this.changeData.list.name6.prp_status = 0;

          this.changeData.list.name1.prp_add = 0;
          this.changeData.list.name2.prp_add = 0;
          this.changeData.list.name3.prp_add = 0;
          this.changeData.list.name4.prp_add = 0;
          this.changeData.list.name5.prp_add = 0;
          this.changeData.list.name6.prp_add = 0;

          this.changeData.list.name1.ratio_status = 0;
          this.changeData.list.name2.ratio_status = 0;
          this.changeData.list.name3.ratio_status = 0;
          this.changeData.list.name4.ratio_status = 0;
          this.changeData.list.name5.ratio_status = 0;
          this.changeData.list.name6.ratio_status = 0;

          this.changeData.list.name1.ratio_add = 0;
          this.changeData.list.name2.ratio_add = 0;
          this.changeData.list.name3.ratio_add = 0;
          this.changeData.list.name4.ratio_add = 0;
          this.changeData.list.name5.ratio_add = 0;
          this.changeData.list.name6.ratio_add = 0;

          this.changeData.month_add = 0;
          this.changeData.valid_patent = 0;

          let data = this.gauge_obj;
          let data1 = JSON.parse(JSON.stringify(this.gauge_objDemoSmall));
          let data2 = JSON.parse(JSON.stringify(this.gauge_objDemoSmall));
          data.data[0].value = this.changeData.valid_patent;

          //写死的
          data1.data[0].value = 0;
          data1.data[0].name = this.changeData.prp_name;
          data2.data[0].value = 0;
          data2.data[0].name = this.changeData.ratio_name;
          //仪表盘
          let gauge = document.getElementById("change_t_gauge");
          this.gauge(gauge, data);
          let gauge1 = document.getElementById("change_t_gauge1");
          this.gauge(gauge1, data1);
          let gauge2 = document.getElementById("change_t_gauge2");
          this.gauge(gauge2, data2);
        });
    },
    getDays(year, month) {
      let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) {
        days[1] = 29;
      }
      return days[month - 1];
    },

    changeTime() {
      this.getPatentInfo();
      this.year = this.time.slice(0, 4);

      let time1 = this.time + "-01";
      let time2 = this.time + "-" + this.getDays(this.year, 12);
      this.visitDemandInfo(time1, time2);

      let time3 = this.year + "-01-01";
      let time4 = this.year + "-12-" + this.getDays(this.year, 12);

      getVisitInfo({
        start_time: time3,
        end_time: time4,
      }).then((res) => {
        this.changeType[0].Number = res.list.company;
        this.changeType[1].Number = res.list.demand;
        this.changeType[2].Number = res.list.true_demand;
        this.changeType[3].Number = res.list.ratio;
      });

      let time5 = this.time + "-01";
      let time6 =
        this.time + "-" + this.getDays(this.year, Number(this.time.slice(5, 7)));
      getVisitInfo({
        start_time: time5,
        end_time: time6,
      }).then((res) => {
        this.changeList.one = res.list;
      });

      console.log("shang", Number(this.time.slice(5, 7)) - 1);
      let yueNumber = Number(this.time.slice(5, 7)) - 1;
      let yue = yueNumber > 10 ? yueNumber : "0" + yueNumber; //月
      let time7 = this.year + "-" + yue + "-01";
      let time8 =
        this.year + "-" + yue + "-" + this.getDays(this.year, Number(yueNumber));

      //上月
      getVisitInfo({
        start_time: time7,
        end_time: time8,
      }).then((res) => {
        this.changeList.two = res.list;
      });
    },

    getVisitInfo(time1, time2) {
      getVisitInfo({
        start_time: time1,
        end_time: time2,
      }).then((res) => {
        this.changeType[0].Number = res.list.company;
        this.changeType[1].Number = res.list.demand;
        this.changeType[2].Number = res.list.true_demand;
        this.changeType[3].Number = res.list.ratio;
      });
    },

    gauge(chartDom, data) {
      let myChart = echarts.init(chartDom, "dark");
      let option = {
        title: {
          zlevel: 1,
        },
        backgroundColor: "",
        series: [
          {
            radius: "90%",
            type: "gauge",
            center: ["50%", "58%"],
            startAngle: data.startAngle,
            endAngle: data.endAngle,
            min: data.min,
            max: data.max,
            splitNumber: data.splitNumber,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 215, 252,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 153, 249,1)",
                },
              ]),
            },
            progress: {
              show: true,
              width: data.progress.width, //进度条宽度
              roundCap: true,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: data.axisLine.lineStyle.width,
                color: [[1, "#cac9ca"]],
                opacity: data.axisLine.lineStyle.opacity, //全部进度条
              },
            },
            axisTick: data.axisTick,
            splitLine: data.splitLine,
            axisLabel: data.axisLabel,
            anchor: {
              show: false,
            },
            title: {
              show: true,
            },
            detail: data.detail,
            data: data.data,
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    async streetcenterrat() {
      let demo = await getPatentAdd();
      this.Histogram5 = demo.open;
      let list = demo.list[0].data;

      let dimensions = [];
      this.Histogram5.map((item) => {
        dimensions.push(item.product);
      });

      //柱状图
      let chartDom1 = document.getElementById("zho_box_b");
      this.Histogram(chartDom1, this.Histogram5, dimensions, list);
    },
    pie(chartDom, data) {
      let myChart = echarts.init(chartDom, "dark");
      let option = {
        backgroundColor: "", //设置无背景色
        tooltip: {
          show: true,
          trigger: "item",
          formatter: (params) => {
            var html =
              params.color +
              params.data.name +
              params.data.value +
              params.percent.toFixed(0) +
              "%";

            let res = ` 
                  <div style='display: inline-block;width:10px;height:10px;background-color:${
                    params.color
                  };border-radius: 50%;'></div>
                  <span style='margin:0 5px 0 0;font-weight: bold;font-size: 14px;'>${
                    params.data.name
                  }</span>
                  <span style='margin:0 5px'>${params.data.value}例</span>
                  <span style='margin:0 0 0 5px'>${params.percent.toFixed(0)}%</span>
              `;
            return res;
          },
        },
        legend: {
          orient: "vertical",
          right: "1%",
          top: "0%",
          // bottom: 20,
          type: "scroll",
        },
        series: [
          {
            center: ["35%", "50%"],
            name: "",
            type: "pie",
            radius: ["55%", "90%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5, //圆角
              borderColor: "#111129",
              borderWidth: 5, //间隙
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      option && myChart.setOption(option);
      // window.onresize = myChart.resize;
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    Histogram(chartDom, dataList, dimensions, list) {
      let myChart = echarts.init(chartDom, "dark");
      let option = {
        tooltip: {
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 10,
          },
          backgroundColor: "rgba(12, 16, 63,.7)",
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let res;
            res = `
                <div style='color:#026cfe'>
                  发明申请<span style='margin: 0 10px 0 15px'> ${datas[0].value.发明申请}</span><span> ${datas[0].value.open}%</span>
                </div>
                <div style='color:#6ccca6'>
                  发明授权<span style='margin: 0 10px 0 15px'> ${datas[0].value.发明授权}</span><span> ${datas[0].value.auth}%</span>
                </div>
                <div style='color:#e9cf18'>
                  实用新型<span style='margin: 0 10px 0 15px'> ${datas[0].value.实用新型}</span><span> ${datas[0].value.news}%</span>
                </div>
                <div style='color:#7f6eee'>
                  外观设计<span style='margin: 0 10px 0 15px'> ${datas[0].value.外观设计}</span><span> ${datas[0].value.apper}%</span>
                </div>
              `;

            return res;
          },
        },

        backgroundColor: "", //设置无背景色
        grid: {
          // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px",
        },
        legend: {
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            发明公开: true,
            发明授权: true,
            实新授权: true,
            外观授权: true,
            总体占比: true,
          },
        },
        dataset: {
          // dimensions: dimensions,
          source: dataList,
        },
        xAxis: {
          type: "category",
          data: dimensions,
        },
        yAxis: {
          splitLine: {
            //不显示分割线
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#0867ff",
            },
          },
          {
            type: "bar",
            itemStyle: {
              color: "#68cfaa",
            },
          },
          {
            type: "bar",
            itemStyle: {
              color: "#ecd419",
            },
          },
          {
            type: "bar",
            itemStyle: {
              color: "#7c6ef0",
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      let type = 1;
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-input__inner {
  border: 1px solid #4995f4;
  background: #111129;
  color: #4995f4;
}
::v-deep .el-input__prefix {
  color: #4995f4;
}
.timeBox {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.el-main {
  margin-left: 0px;
  padding: 0 20px !important;
  background-color: #111129;
  // border-radius: 5px;
  // margin-top: 15px;
}

.left_box_t {
  width: 100%;
  // height: 326px;
  height: 51%;
  background: url(../../../assets/web/zho_s_k.png) no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 15px 0;
  padding: 55px 30px 28px 30px;
  color: #fff;
  position: relative;
  overflow: hidden;

  .change_t {
    height: 40%;
    zoom: var(--zoom);

    .el-row {
      height: 100%;

      .el-col {
        height: 100%;

        .change_box {
          color: var(--bgColor);
          font-size: 16px;
          text-align: center;
          height: 100%;
          background-color: #0f1b47;
          line-height: initial;
          // padding: 23px 20px 29px 27px;
          position: relative;

          .change_box_new {
            position: absolute;
            top: 50%;
            left: 45%;
            width: 80%;
            transform: translate(-40%, -50%);
          }

          .change_text {
            position: relative;
            display: inline-block;
          }

          .change_text::before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 12px;
            border-radius: 3px;
            background-color: var(--bgColor);
            margin-right: 5px;
            vertical-align: middle;
            position: absolute;
            top: 50%;
            left: -10px;
            transform: translate(0px, -50%);
          }
        }
      }
    }
  }

  .change_b {
    height: 53%;
    zoom: var(--zoom);

    .el-row {
      height: 100%;

      .el-col {
        height: 100%;

        .change_b_item {
          margin-top: 11px;
          font-size: 16px;
          text-align: center;
          height: 100%;
          background-color: #0f1b47;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          line-height: initial;

          .item_t {
            span {
              background-color: var(--bgColor);
              border-radius: 5px;
              color: #fff;
              font-size: 16px;
              padding: 2px 20px 2px 20px;
              display: inline-block;
            }
          }
        }
      }
    }
  }

  .change_Histogram {
    position: absolute;
    width: 100%;
    height: 38%;
    bottom: 15px;
    left: -19px;
  }

  .left_text {
    position: absolute;
    top: 18px;
    left: 30px;
    font-size: 20px;
    color: #fff;
    zoom: var(--zoom);
  }
}

.left_box_b {
  width: 100%;
  height: 46.5%;
  background: url(../../../assets/web/zho_s_k.png) no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 15px 0;
  position: relative;
  padding: 50px 0px 31px 30px;
  color: #fff;
  overflow: hidden;

  .zho_box_b_main {
    width: 70%;
    height: 120%;
    position: absolute;
    top: -30px;
    left: -30px;
  }

  .left_text {
    position: absolute;
    top: 18px;
    left: 30px;
    font-size: 20px;
    color: #fff;
    zoom: var(--zoom);
  }

  .pie_new {
    height: 100%;

    .pie {
      // position: absolute !important;
      // width: 130%;
      // // height: 396px;
      height: 100%;
      // top: -50px;
      // left: -85px;
    }
  }

  .left_demand {
    background-color: #0f1b47;
    height: 100%;
    text-align: left;
    font-size: 16px;
    padding: 38px 0px 29px 46px;
    line-height: initial;
    position: relative;
    color: var(--bgc);
    position: relative;

    .left_demand_new {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .demand_title {
      display: inline-block;
      position: relative;
    }

    .demand_title::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 12px;
      border-radius: 3px;
      background-color: var(--bgc);
      margin-right: 5px;
      vertical-align: middle;
      position: absolute;
      top: 50%;
      left: -10px;
      transform: translate(0px, -50%);
    }
  }

  .demand_box {
    zoom: var(--zoom);
  }

  .demand_box:nth-child(3),
  .demand_box:nth-child(4) {
    margin-top: 20px;
  }
}

.rigth_box_b {
  width: 100%;
  height: 23.5%;
  background: url(../../../assets/web/zho_s_k.png) no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 15px 0;
  position: relative;

  .zho_box_b_bar {
    width: 100%;
    height: 100%;
  }

  .left_text {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 20px;
    color: #fff;
    zoom: var(--zoom);
  }
}
.rigth_box_t {
  position: relative;
  width: 100%;
  height: 74%;
  background: url(../../../assets/web/jie_z_s.png) no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 15px 0;
  padding: 26px 30px 28px 30px;
  color: #fff;
  overflow: hidden;

  .change_t {
    height: 64%;
    position: relative;
    top: -18px;
    z-index: 9;

    .change_t_gauge {
      height: 100%;
      width: 75%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }

    .change_t_gauge1 {
      height: 40%;
      width: 20%;
      position: absolute;
      right: 0;
      top: 64%;
    }

    .change_t_gauge2 {
      height: 40%;
      width: 20%;
      position: absolute;
      top: 64%;
    }

    .add_text {
      position: absolute;
      top: 60%;
      left: 50%;
      font-size: 20px;
      color: #fff;
      text-align: center;
      transform: translate(-50%, 00%);
      z-index: 9;
      line-height: initial;
      zoom: var(--zoom);
    }
  }

  .gauge_bgc {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
    top: 8%;
    zoom: var(--zoom);

    div:nth-child(1) {
      width: 640px;
      height: 662px;
      border-radius: 50%;
      background: rgba(18, 47, 121, 0.2);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    div:nth-child(2) {
      width: 538px;
      height: 554px;
      border-radius: 50%;
      background: rgba(18, 47, 121, 0.4);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    div:nth-child(3) {
      width: 436px;
      height: 455px;
      border-radius: 50%;
      background: rgba(18, 47, 121, 0.6);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    div:nth-child(4) {
      width: 334px;
      height: 364px;
      border-radius: 50%;
      background: rgba(18, 47, 121, 0.8);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    div:nth-child(5) {
      width: 244px;
      height: 255px;
      border-radius: 50%;
      //渐变色
      background: linear-gradient(
        to bottom,
        rgba(1, 108, 210, 1),
        rgba(2, 183, 245, 1),
        rgba(1, 108, 210, 1)
      );
      // background: #00b5f3;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .change_b {
    z-index: 9;
    position: absolute;
    left: 20px;
    right: 20px;
    // top: 62%;
    height: 32%;
    zoom: var(--zoom);

    .el-row {
      height: 100%;

      .el-col {
        height: 100%;

        .change_b_item {
          margin-top: 11px;
          font-size: 11px;
          text-align: center;
          height: 100%;
          background-color: #0f1b47;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          line-height: initial;

          .item_t {
            span {
              background-color: #1b3182;
              border-radius: 5px;
              color: #28fefe;
              font-size: 10px;
              padding: 4px 12px 3px 12px;
              display: inline-block;
            }
          }

          .item_z {
            .z_t {
              font-size: 22px;
            }

            .z_b {
              font-size: 13px;
              color: #59a3ff;
              position: relative;
            }

            .z_b::before {
              content: "";
              display: inline-block;
              width: 5px;
              height: 12px;
              border-radius: 3px;
              background-color: var(--bgColor);
              margin-right: 5px;
              vertical-align: middle;
              position: absolute;
              top: 10px;
              left: 50%;
              transform: translate(-35px, -50%);
            }
          }

          .item_b {
            .el-row {
              padding: 0 5px;

              .el-col {
                .one_div {
                  background-color: #1b3182;
                  color: #52ffff;
                  border-radius: 5px;
                  padding: 8px 2px;
                  font-size: 9px;

                  .state {
                    display: flex;
                    justify-content: center;

                    i {
                      font-size: 11px;
                      font-weight: bold;
                    }

                    .span_typeTop {
                      color: #ff4439;
                    }

                    .span_typebot {
                      color: #40ffaf;
                    }

                    .icon_bottom {
                      display: inline-block;
                      transform: rotate(180deg);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}
</style>
